<template>
  <div>
    <swiper ref="mySwiper" :options="swiperOptions">
      <swiper-slide>
        <img src="../assets/1.jpeg" class="w-100">
      </swiper-slide>
      <swiper-slide>
        <img src="../assets/2.jpeg" class="w-100">
      </swiper-slide>
      <div class="swiper-pagination pagination-home text-right px-3 pb-2" slot="pagination"></div>
    </swiper>
    <!-- 轮播图结束 -->
    <div class="nav-icons bg-white mt-3 text-center pt-3 text-grey-1">
      <div class="d-flex flex-wrap navs" :class="{'open': nav_open}">
        <div class="nav-item mb-3">
          <i class="sprite sprite-news"></i>
          <div class="py-2 pt-1 fs-sm">爆料站</div>
        </div>
        <div class="nav-item mb-3">
          <i class="sprite sprite-story"></i>
          <div class="py-2 pt-1 fs-sm">故事会</div>
        </div>
        <div class="nav-item mb-3">
          <i class="sprite sprite-shop"></i>
          <div class="py-2 pt-1 fs-sm">周边商城</div>
        </div>
        <div class="nav-item mb-3">
          <i class="sprite sprite-tiyan"></i>
          <div class="py-2 pt-1 fs-sm">体验服</div>
        </div>
        <div class="nav-item mb-3">
          <i class="sprite sprite-xinren"></i>
          <div class="py-2 pt-1 fs-sm">新人专区</div>
        </div>
        <div class="nav-item mb-3">
          <i class="sprite sprite-rongyao"></i>
          <div class="py-2 pt-1 fs-sm">荣耀 传承</div>
        </div>
        <div class="nav-item mb-3">
          <i class="sprite sprite-moni"></i>
          <div class="py-2 pt-1 fs-sm">模拟战资料库</div>
        </div>
        <div class="nav-item mb-3">
          <i class="sprite sprite-space"></i>
          <div class="py-2 pt-1 fs-sm">王者营地</div>
        </div>
        <div class="nav-item mb-3">
          <i class="sprite sprite-weixin"></i>
          <div class="py-2 pt-1 fs-sm">公众号</div>
        </div>
      </div>
      <div class="bg-light py-2 fs-sm" @click="nav_open=!nav_open">
        <i class="iconfont mr-1 fs-sm" :class="nav_open ? 'icon-icon211' : 'icon-xiala'"></i>
        <span>{{nav_open? '收起' : '展开'}}</span>
      </div>
    </div>
    <!-- 导航图标结束 -->
    <m-list-card title="新闻资讯" icon="menu" :categories="newsCats">
      <template #items="{category}">
        <router-link tag="div" :to="`/articles/${news._id}`" class="pt-3 py-2 fs-lg d-flex" v-for="(news, i) in category.newsList" :key="i">
          <span class="text-info">[{{news.categoryName}}]</span>
          <span class="px-2">|</span>
          <span class="flex-1 text-dark-1 text-ellipsis pr-2">{{news.title}}</span>
          <span class="text-grey-1 fs-sm">{{news.updatedAt | date}}</span>
        </router-link>
      </template>
    </m-list-card>
    <!-- 新闻列表结束 -->
    <m-list-card title="英雄列表" icon="card-hero" :categories="heroCats">
      <template #items="{category}">
        <div class="d-flex flex-wrap" style="margin:0 -0.5rem;">
          <router-link
           tag="div" :to="`/heroes/${hero._id}`"
           class="p-2 text-center" style="width:20%;" v-for="(hero, i) in category.heroList" :key="i">
            <img :src="hero.avatar" class="w-100">
            <div>{{hero.name}}</div>
          </router-link>
        </div>
      </template>
    </m-list-card>
    <!-- 英雄列表结束 -->
    <div class="text-center m-4 text-grey"> ...暂无更多咯... </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
export default {
  filters: {
    date (val) {
      return dayjs(val).format('MM/DD')
    }
  },
  data () {
    return {
      swiperOptions: {
        pagination: {
          el: '.pagination-home'
        },
        autoplay: {
          delay: 2000
        }
      },
      newsCats: [],
      heroCats: [],
      nav_open: false
    }
  },
  methods: {
    async fetchNewsCats () {
      const res = await this.$http.get('/new/list')
      this.newsCats = res.data
      // console.log(res.data)
    },
    async fetchHeroCats () {
      const res = await this.$http.get('/hero/list')
      this.heroCats = res.data
      // console.log(res.data)
    }
  },
  created () {
    this.fetchNewsCats()
    this.fetchHeroCats()
  }
}
</script>

<style lang="scss">
@import '../assets/scss/variables';
.pagination-home {
  .swiper-pagination-bullet {
    opacity: 1;
    border-radius: 0.1538rem;
    background: map-get($colors, 'white');
    &.swiper-pagination-bullet-active {
      background: map-get($map: $colors, $key: 'info');
    }
  }
}
.nav-icons {
  border-top: 1px solid $border-color;
  border-bottom: 1px solid $border-color;
  .navs {
    height: 4.6154rem;
    overflow: hidden;
    .nav-item {
      width: 25%;
      border-right: 1px solid $border-color;
      &:nth-child(4n) {
        border-right: none;
      }
    }
    &.open {
      height: auto;
    }
  }
}
</style>
